<template>
  <a-card :body-style="{height: 'calc(100vh - 125px)'}">

    <!-- 数据列表 -->
    <a-row class="w-full h-full flex flex-col overflow-x-auto overflow-y-hidden">
      <!-- 查询条件 -->
      <a-row v-if="showSearchRow" class="w-full">
        <a-form :model="searchForm" label-align="left" layout="inline" size="small">
          <a-form-item field="deptName" label="部门名称">
            <a-input v-model="searchForm.deptName" allow-clear placeholder="部门名称"/>
          </a-form-item>
          <a-form-item field="status" label="部门状态">
            <a-select v-model="searchForm.status" allow-clear placeholder="部门状态">
              <a-option v-for="(d, index) in dicts[proxy.DICT.commonNumberStatus]" :key="index" :label="d.dictValue"
                        :value="d.dictKey"/>
            </a-select>
          </a-form-item>
        </a-form>
        <a-row class="w-full mt-2" justify="center">
          <a-space>
            <a-button type="primary" @click="getList(false)">
              <template #icon>
                <icon-search/>
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="getList(true)">
              <template #icon>
                <icon-sync/>
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-row>
      </a-row>

      <!-- 分割线 -->
      <a-divider v-if="showSearchRow" class="mt-2"/>

      <!-- 数据操作区 -->
      <a-row class="w-full flex justify-between">
        <a-space>
          <!-- 添加 -->
          <a-button v-perm="['basic:dept:add']" size="small" type="primary" @click="addBtnClick()">
            <template #icon>
              <icon-plus/>
            </template>
            <template #default>添加</template>
          </a-button>
          <!-- 展开/折叠 -->
          <a-button size="small" @click="treeExpand = !treeExpand">
            <template #icon>
              <icon-swap/>
            </template>
            <template #default>展开/折叠</template>
          </a-button>
        </a-space>
        <a-space>
          <!-- 刷新 -->
          <a-button shape="circle" size="small" @click="getList(false)">
            <template #icon>
              <icon-refresh/>
            </template>
          </a-button>
          <!-- 收缩/展开 -->
          <a-button shape="circle" size="small" @click="showSearchRow = !showSearchRow">
            <template #icon>
              <icon-caret-up v-if="showSearchRow"/>
              <icon-caret-down v-else/>
            </template>
          </a-button>
        </a-space>
      </a-row>

      <!-- 数据展示区 -->
      <a-row class="w-full flex-1 mt-3 overflow-y-auto">
        <a-table ref="tableRef" :columns="datatable.columns" :data="datatable.records" :loading="datatable.loading"
                 :pagination="false" :scroll="{y: '100%'}" class="w-[100%]" row-key="deptId"
                 table-layout-fixed>
          <!-- 部门名称 -->
          <template #deptName="{ record }">
            <a-link icon @click="detailBtnClick(record.deptId)">{{ record.deptName }}</a-link>
          </template>
          <!-- 部门负责人 -->
          <template #deptLeader="{ record }">
            <dict-convert :dict-data="dicts[proxy.DICT.userList]" :dict-key="record.deptLeader"/>
          </template>
          <!-- 部门状态 -->
          <template #status="{ record }">
            <dict-convert :dict-data="dicts[proxy.DICT.commonNumberStatus]" :dict-key="record.status"/>
          </template>
          <!-- 操作 -->
          <template #operation="{ record }">
            <a-button v-perm="['basic:dept:add']" size="mini" style="padding: 0 5px" type="text"
                      @click="addRowBtnClick(record)">
              <template #icon>
                <icon-plus/>
              </template>
              <template #default>添加</template>
            </a-button>
            <a-button v-perm="['basic:dept:update']" size="mini" style="padding: 0 5px" type="text"
                      @click="updateBtnClick(record.deptId)">
              <template #icon>
                <icon-edit/>
              </template>
              <template #default>修改</template>
            </a-button>
            <a-popconfirm content="确认要删除吗?" @ok="deleteBtnOkClick(record)">
              <a-button v-perm="['basic:dept:delete']" size="mini" status="danger" style="padding: 0 5px" type="text">
                <template #icon>
                  <icon-delete/>
                </template>
                <template #default>删除</template>
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-row>
    </a-row>


    <!-- 添加/修改 -->
    <a-modal v-model:visible="modal.visible" :esc-to-close="false" :footer="false" :mask-closable="false" draggable
             width="50%">
      <template #title>{{ modal.title }}</template>
      <component :is="modal.component" v-if="modal.visible" :params="modal.params" @cancel="onCancel" @ok="onOk"/>
    </a-modal>
  </a-card>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref, shallowRef, watch} from 'vue'
import DeptEdit from "~/pages/basic/dept/DeptEdit.vue";
import DeptDetail from "~/pages/basic/dept/DeptDetail.vue";
import {deleteDeptByDeptIdApi, getDeptListApi} from '~/api/basic/dept.js'

//全局实例
const {proxy} = getCurrentInstance()
//加载字典
const dicts = proxy.LoadDicts([proxy.DICT.commonNumberStatus, proxy.DICT.userList])
//是否展示搜索区域
const showSearchRow = ref(true)
//搜索参数表单
const searchForm = reactive({
  //部门名称
  deptName: null,
  //部门状态
  status: null
})
//表格
const tableRef = ref()
//数据列表
const datatable = reactive({
  //列配置
  columns: [
    {
      title: '部门名称',
      dataIndex: 'deptName',
      slotName: 'deptName',
      align: 'left',
      width: 250,
      headerCellClass: 'w-[100%] flex justify-center'
    },
    {title: '负责人', dataIndex: 'deptLeader', slotName: 'deptLeader', align: 'center'},
    {title: '排序', dataIndex: 'deptSort', align: 'center', width: 80},
    {title: '电话', dataIndex: 'phone', align: 'center', ellipsis: true, tooltip: true},
    {title: '邮箱', dataIndex: 'email', align: 'center', ellipsis: true, tooltip: true},
    {title: '部门状态', dataIndex: 'status', slotName: 'status', align: 'center', width: 100},
    {title: '操作', slotName: 'operation', align: 'center', width: 200, fixed: 'right'}
  ],
  //加载
  loading: false,
  //数据列表
  records: []
})
//查询数据列表
const getList = (isReset = false) => {
  //重置查询条件
  if (isReset) {
    searchForm.deptName = null
    searchForm.status = null
  }
  datatable.loading = true
  getDeptListApi(searchForm).then(res => {
    //table数据赋值
    datatable.records = res
  }).finally(() => {
    datatable.loading = false
  })
}
//公共模态框
const modal = reactive({
  //是否显示
  visible: false,
  //模态框标题
  title: '部门管理',
  //传递参数
  params: {},
  //组件名称
  component: null
});
//添加按钮 -> 点击事件
const addBtnClick = () => {
  modal.visible = true
  modal.title = '添加部门'
  modal.params = {operationType: proxy.operationType.add.type}
  modal.component = shallowRef(DeptEdit)
}
//展开/折叠 - 默认折叠
const treeExpand = ref(false)
//监听展开/折叠
watch(() => treeExpand.value, (newVal, oldVal) => {
  if (tableRef.value) {
    tableRef.value.expandAll(treeExpand.value)
  }
}, {deep: true, immediate: true})

//表格行数据 "添加" -> 点击
const addRowBtnClick = (record) => {
  modal.visible = true
  modal.title = '添加部门'
  modal.params = {operationType: proxy.operationType.add.type, parentDeptId: record.deptId}
  modal.component = shallowRef(DeptEdit)
}
//表格行数据 "删除" -> 确认
const deleteBtnOkClick = (record) => {
  if (record.children && record.children.length > 0) {
    proxy.$msg.error('该部门下包含下级部门，请先删除下级部门')
    return
  }
  deleteDeptByDeptIdApi(record.deptId).then(() => {
    proxy.$msg.success(proxy.operationType.delete.success)
    //刷新列表
    getList()
  })
}
//表格行数据 "修改" -> 点击
const updateBtnClick = (deptId) => {
  modal.visible = true
  modal.title = '修改部门'
  modal.params = {operationType: proxy.operationType.update.type, deptId: deptId}
  modal.component = shallowRef(DeptEdit)
}
//表格行数据 "查看" -> 点击
const detailBtnClick = (deptId) => {
  modal.visible = true
  modal.title = '部门详细信息'
  modal.params = {operationType: proxy.operationType.detail.type, deptId: deptId}
  modal.component = shallowRef(DeptDetail)
}
//模态框 -> 确认
const onOk = () => {
  modal.visible = false
  //查询数据列表
  getList()
}
//模态框 -> 取消
const onCancel = () => {
  modal.visible = false
}
//初始化
onMounted(() => {
  //查询数据列表
  getList()
})
</script>
<style scoped></style>
